<template>
	<div class="main_content">
		<div class="top_seach">
			<div class="btns">
				
				<el-input v-model="input" placeholder="请输入标题" style="margin-right: 10px;" prefix-icon="el-icon-search"
					clearable />
				<el-button type="primary" icon="el-icon-search" @click="handleSearch"></el-button>
				<el-button type="primary" size="medium" @click="handleAdd">新增</el-button>
			</div>
		</div>
		<div class="content_table">
			<el-table :data="PostsData" style="width: 100%">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column label="标题" prop="postName" width="280">
				</el-table-column>
				<el-table-column label="内容" prop="postContent" width="700" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="postContent" width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="showContent(scope.row.postContent)">显示内容</el-button>
					</template>
				</el-table-column>
				<el-table-column label="发帖人" prop="nickName" width="160">
				</el-table-column>
				<el-table-column label="审核状态">
					<template slot-scope="scope">
						<el-tag v-if="scope.row.status === 0" type="danger">未通过</el-tag>
						<el-tag v-if="scope.row.status === 1" type="success">通过</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作" fixed="right" width="180">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<DetailsPost ref="detailsPost"></DetailsPost>
		<AddPost ref="addPost"></AddPost>
		<el-dialog title="内容" :visible.sync="dialogFormVisible1">
			<div class="w-e-text">
				<div v-html="postContent"></div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogFormVisible1 = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import DetailsPost from "../../components/backstage/DetailsPost.vue"
	import AddPost from "../../components/backstage/AddPost.vue"
	import PostsApi from "@/api/posts.js"
	export default {
		components: {
			DetailsPost,
			AddPost
		},
		data() {
			return {
				total: 0,
				pageSize: 10,
				currentPage: 1,
				input: "",
				PostsData: [],
				dialogFormVisible1: false,
				postContent: ""
			}
		},
		methods: {
			showContent(row) {
				this.postContent = row;
				this.dialogFormVisible1 = true;
			},
			handleEdit(index, row) { //编辑点击事件
				this.$refs.detailsPost.dialogFormVisible = true;
				this.$refs.detailsPost.form = JSON.parse(JSON.stringify(row));
				this.$refs.detailsPost.createE();
			},
			handleAdd() {
				this.$refs.addPost.dialogFormVisible = true;
				this.$refs.addPost.createEditor();
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.DeletePost(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			async DeletePost(row) { //删除
				const res = await PostsApi.DeletePost("/znExchangePost/deletePost/" + row.postId);
				this.SearchPostsAll();
			},
			async handleSearch() { //搜索
				const res = await PostsApi.SearchPostTitle("/znExchangePost/searchPosts",{
					title : this.input,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				})
				if(this.input == ""){
					this.SearchPostsAll();
				}else if(res.code == 200){
					this.PostsData = res.data.records;
					this.total = res.data.total;
					this.$message.success(res.msg);
				}else{
					this.$message.error(res.msg)
				}
			},
			async SearchPostsAll() { //全部
				const res = await PostsApi.PostsAll("/znExchangePost/SearchPostsAll", {
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.PostsData = res.data.records;
					this.total = res.data.total;
				}
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.SearchPostsAll();
			}
		},
		computed: {
		},
		created() {
			this.SearchPostsAll();
		}
	}
</script>

<style lang="scss" scoped>
	.main_content {
		height: 100%;

		.top_seach {
			height: 7%;
			position: relative;

			.btns {
				display: flex;
				position: absolute;
				left: 38%;
				bottom: 0%;
			}
		}

		.content_table {
			height: 83%;

			.demo-table-expand {
				font-size: 0;

			}

			.demo-table-expand label {
				width: 90px;
				color: #99a9bf;
			}

			.demo-table-expand .el-form-item {
				margin-right: 0;
				margin-bottom: 0;
				width: 50%;
			}

			.ImgBox {
				margin: 0 20px 0 20px;
			}

			.InfoBox {}
		}

		.footer_page {
			height: 10%;
			position: relative;

			.el-pagination {
				position: absolute;
				right: 2%;
				bottom: 50%;
				transform: translateY(50%);

			}
		}

	}
</style>